<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

// :has() 是一个强大的 CSS 伪类选择器，它允许你根据元素的后代、子元素或其他特定条件来选择元素。
//这使得 CSS 可以更具上下文感知性，从而可以在选择和样式化元素时进行更复杂和细致的控制。

// 基本语法

// element:has(selector) {
//   /* CSS rules */
// }
// 详细用法和示例
// 1. 选择包含特定后代的元素
// 你可以使用 :has() 选择包含特定后代元素的父元素。

// /* 选择包含 <img> 的 <div> */
// div:has(img) {
//   border: 2px solid red;
// }

// 2. 选择包含特定子元素的元素
// 可以选择包含特定子元素的元素。

// css
// 复制代码
// /* 选择包含直接子元素 <p> 的 <div> */
// div:has(> p) {
//   background-color: lightblue;
// }
// 3. 组合选择器
// 你可以组合 :has() 和其他选择器使用。

// css
// 复制代码
// /* 选择包含 <a> 的 <li>，且 <li> 是 <ul> 的直接子元素 */
// ul > li:has(a) {
//   list-style-type: none;
// }
// 4. 选择包含特定属性的元素
// 你还可以使用 :has() 选择包含具有特定属性的元素的父元素。

// css
// 复制代码
// /* 选择包含 <input> 且 <input> 有 type="text" 属性的 <form> */
// form:has(input[type="text"]) {
//   padding: 20px;
//   border: 1px solid #ccc;
// }
// 5. 结合伪类选择器
// 可以将 :has() 与其他伪类选择器结合使用。

// /* 选择包含焦点元素的父元素 */
// div:has(:focus) {
//   outline: 2px solid blue;
// }


// 使用场景和优势
// 增强样式灵活性：通过选择特定结构的元素，能够使样式更加灵活和具体。
// 减少 JavaScript：某些情况下，可以用纯 CSS 解决以前需要 JavaScript 的问题。
// 改进交互体验：能够更好地响应用户交互，如鼠标悬停或焦点事件。
// 兼容性
// :has() 伪类选择器是 CSS Selectors Level 4 规范的一部分，但并非所有浏览器都支持这一特性。确保在实际使用中检查目标浏览器的兼容性。


// 截至 2024 年初，以下是一些主要浏览器对 :has() 的支持情况：
// Chrome: 支持（版本 105+）
// Firefox: 不支持（计划支持中）
// Safari: 支持（版本 15.4+）
// Edge: 支持（版本 105+）
// 对于需要兼容不支持 :has() 的浏览器，可以使用 JavaScript 或其他替代方法来实现类似的功能。

// 结论
// :has() 伪类选择器为 CSS 带来了更高的选择器灵活性，使得根据元素的上下文来选择和样式化变得更加容易。
//尽管其浏览器支持目前还不全面，但在未来它可能会成为 CSS 中一个重要的工具。使用时需要注意浏览器兼容性，并在必要时提供替代方案。


  </script>
  
</body>
</html>